<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性-排序过滤</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用"></div>
</body>
<script>
    const {createApp: 创建, ref: 引用, computed: 计算} = Vue 

    const 根组件 = {
        template: `
            <input type="text" v-model="过滤文本" placeholder="过滤器">
            <ul>
                <li v-for="条目 in 过滤后条目" :key="条目.编号">{{条目.名称}}</li>
            </ul>
        `,

        setup() {
            const 条目列表 = 引用([
                {编号: 1, 名称: '条目1'},
                {编号: 2, 名称: '条目2'},
                {编号: 3, 名称: '条目3'},
            ])
            const 过滤文本 = 引用('')
            const 过滤后条目 = 计算(
                () => {
                    let 过滤后 = 条目列表.value.filter(条目 => 条目.名称.toLowerCase().includes(过滤文本.value.toLowerCase()))
                    let 排序后 = 过滤后.sort((甲, 乙) => 甲.名称.localeCompare(乙.名称))
                    return 排序后
                }
            )

            return {条目列表, 过滤文本, 过滤后条目}
        }
    }

    const 应用 = 创建(根组件)
    应用.mount('#应用')
</script>
</html>